<template>
    <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #3591ff">
        <div style="display: flex; background-color: white; width: 70%; border-radius: 5px; overflow: hidden">
            <div style="flex: 1">
              <img src="../../assets/login.png" height="500" width="500"/></div>
            <div style="flex: 1; display: flex; align-items: center; justify-content: center">
                <el-form :model="user" style="width: 80%" :rules="rules" ref="loginRef">
                    <div style="font-size: 30px; font-weight: bold; text-align: center; margin-bottom: 20px; font-family:方正舒体">欢迎登录微讯校园系统</div>
                    <el-tabs v-model="activeName"  @tab-click="handleClick"  >
                        <!--账号密码登录-->
                        <el-tab-pane label="账号密码登录" name="first"  >
                            <el-form :model="user" :rules="rules" ref="loginForm">
                                <el-form-item prop="username">
                                    <el-input prefix-icon="el-icon-user"
                                              size="medium"
                                              autocomplete="off"
                                              placeholder="请输入用户名"
                                              v-model="user.username"></el-input>
                                </el-form-item>
                                <el-form-item prop="password">
                                    <el-input prefix-icon="el-icon-lock" size="medium"
                                              show-password placeholder="请输入密码" v-model="user.password"
                                              autocomplete="off"
                                              ></el-input>
                                </el-form-item>
                                <el-form-item prop="code">
                                    <div style="display: flex">
                                        <el-input placeholder="请输入验证码"
                                                  prefix-icon="el-icon-circle-check"
                                                  size="medium" style="flex: 1"
                                                  v-model="user.code"
                                                  @keyup.enter.native="confirm"></el-input>
                                        <div style="flex: 1; height: 36px">
                                            <valid-code @update:value="getPicCode" />
                                        </div>
                                    </div>
                                </el-form-item>
                            </el-form>
                            <el-form-item>
                                <el-button type="primary" style="width: 100%" @click="confirm" :disabled="confirm_disabled">登 录</el-button>
                            </el-form-item>
                        </el-tab-pane>
                    </el-tabs>
                </el-form>
            </div>
        </div>

    </div>
</template>


<script>

    import ValidCode from ".././backend/ValidCode";

    export default {
        name: "Login",
        components: {
            ValidCode
        },
        data() {
            // 验证码校验
            const validateCode = (rule, value, callback) => {
              if (value === '') {
                    callback(new Error('请输入验证码'))
                } else if (value.toLowerCase() !== this.code) {
                    callback(new Error('验证码错误'))
                } else {
                    callback()
                }
            }

            return {
                //登录按钮禁用
                confirm_disabled: false,
                activeName:"first",//默认展示账号登录
                code: '',  // 验证码组件传递过来的code
                ruleForm: {
                    phoneNumber: '',
                    phoneCode: '',
                },
                adminList:{
                  universityId:''
                },
                user: {
                    code: '',   // 表单里用户输入的code 验证码
                    username: '',
                    password: ''
                },
                rules: {
                    username: [
                        { required: true, message: '请输入账号', trigger: 'blur' },
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                    ],
                    code: [
                        { validator: validateCode, trigger: 'blur' }
                    ],

                },
                rules_phone:{
                     phoneNumber: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '请正确填写您的手机号码', trigger: 'blur' }
                    ],
                    phoneCode: [
                        { required: true, message: '请输入验证码', trigger: 'blur' },
                        { pattern: /^[0-9]{6}$/, message: '请填写有效的验证码', trigger: 'blur' }
                    ]
                }

            }

        },
      /*  watch: {
            // 监听手机号 改变获取验证码按钮状态
            'ruleForm.phoneNumber': function (value) {
                const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
                const val = reg.test(value)
                if (val) {
                    this.attcode = false
                } else {
                    this.attcode = true
                }
            },
        },*/
        created() {

        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
            },

            getPicCode(code) {
              this.code = code.toLowerCase()
            },

            confirm() {
                //this.confirm_disabled = true;
                this.$refs.loginForm.validate((valid) => {
                    if (valid) { //valid成功为true，失败为false
                        //去后台验证用户名密码
                        this.$axios.post('/admin/login?username='+this.user.username+"&password="+this.user.password).then(resp=>{
                          if (resp.data.code==200){
                            var map=resp.data.data
                            console.log("登录的数据",resp.data)
                            sessionStorage.setItem("token",map.token)
                            sessionStorage.setItem("admin",JSON.stringify(map.admin))
                            this.level=JSON.stringify(map.admin.level)
                            console.log("level",this.level)

                            this.user={}
                           if (this.level==1){
                             this.$router.push("/admin/Main")
                           } else if ( this.level==2){
                             this.$router.push("/admin/HomePage")
                           }

                          } else{
                            this.$message.error(resp.data.message);
                          }
                        })

                    } else {
                        this.confirm_disabled = false;
                        console.log('校验失败');
                        this.$message({
                            message: '校验失败！',
                            type: 'error'
                        });
                        return false;
                    }
                });

            },
        }
    }
</script>


<style scoped>

</style>
